<template>
	<view class="x-form">
		<u-form :border-bottom="false" label-width="180rpx" :model="form" ref="form1">
			<view class="form-row" v-for="item in myForm" :key="item.name">
				<template v-if="item.type === 'text'">
					<u-form-item :required="item.required || false" :prop="item.name" inputAlign="right"
						:label-style="{fontWeight: 'bold'}" :border-bottom="false" :label="item.label">
						<u-input input-align="right" :disabled="item.disabled"
							:placeholder="item.placeholder || '请输入内容'" v-model="form[item.name]" />
					</u-form-item>
				</template>
				<template v-if="item.type === 'date'">
					<u-form-item :required="item.required || false" :prop="item.name" inputAlign="right"
						:label-style="{fontWeight: 'bold'}" :border-bottom="false" :label="item.label">
						<u-input type="select" input-align="right" :disabled="item.disabled"
							:placeholder="item.placeholder || '请输入内容'" v-model="form[item.name]"
							@click="calendarObj[item.name] = !calendarObj[item.name]" />
					</u-form-item>
					<u-calendar v-model="calendarObj[item.name]" mode="range" max-Date="2050-01-01"
						:toolTip="item.label" @change="changeDate($event,item.name,item.mode)">
					</u-calendar>
				</template>
				<template v-if="item.type === 'city'">
					<u-form-item :required="item.required || false" :prop="item.name" inputAlign="right"
						:label-style="{fontWeight: 'bold'}" :border-bottom="false" :label="item.label">
						<u-input type="select" input-align="right" :disabled="item.disabled"
							:placeholder="item.placeholder || '请输入内容'" v-model="form[item.name]"
							@click="calendarObj[item.name] = !calendarObj[item.name]" />
						<u-picker mode="region" v-model="calendarObj[item.name]"
							@confirm="cityChange($event,item.name)">
						</u-picker>
					</u-form-item>
				</template>
				<template v-if="item.type === 'image'">
					<u-form-item :required="item.required || false"
						:label="`${item.label || '上传文件'} (${uploadFile[item.name]?.length || 0}/${item.max || 1})`"
						:prop="item.name" label-position="top" :label-style="{fontWeight: 'bold'}"
						:border-bottom="false">
						<view class="x-flex-column">
							<u-upload :action=" action" :file-list="fileList" :max-count="item.max || 1"
								@on-remove="fileRemove($event,item.name)" @on-success="fileSuccess($event,item.name)">
							</u-upload>
							<view v-if="item.des" class="des">{{item.des}}</view>
						</view>
					</u-form-item>
				</template>
				<template v-if="item.type === 'textarea'">
					<u-form-item :required="item.required || false" :prop="item.name" label-position="top"
						:label-style="{borderBottom:'solid 1px  rgba(0,0,0,0.03)',fontWeight: 'bold'}"
						:border-bottom="false" :label="item.label || '文本域'">
						<u-input v-model="form[item.name]" :disabled="item.disabled" type="textarea" height="280"
							:auto-height="true" />
					</u-form-item>
				</template>
				<template v-if="item.type === 'file'">
					<u-form-item :required="item.required || false" :prop="item.name" label-position="top"
						:border-bottom="false" :label="`${item.label || '上传文件'}`"
						:label-style="{borderBottom:'solid 1px  rgba(0,0,0,0.03)',fontWeight: 'bold'}">
						<view class="fileArea">
							<view class="fileRow x-flex-row-between-center">
								<view class="label">
									<text>合同文件</text>
								</view>
								<view class="upload x-flex-row" @click="chooseFile($event,item.name,item.mode)">
									<text class="u-padding-right-10">
										{{form[item.name].file_name ? form[item.name].file_name : '添加文件'}}
									</text>
									<u-image :src="`${config.imgPath}/upload-file.png`" height="30rpx" width="30rpx">
									</u-image>
								</view>
							</view>
							<view class="desArea x-flex">
								<view class="left u-margin-right-24">合同备注</view>
								<view class="right" style="flex:1">
									<textarea style="width: 100%;" maxlength="500" v-model="form[item.name].remark"
										placeholder-style="color:#636363" placeholder="请输入您的备注" />
								</view>
								<text class="limitRemark">
									{{form[item.name].remark ? form[item.name].remark.length :0}}/500
								</text>
							</view>
						</view>
					</u-form-item>
				</template>
			</view>
		</u-form>
	</view>


</template>

<script>
	import saveOrPreviewFile from '@/js/saveOrPreviewFile.js';
	import myUploadFile from '@/js/uploadFile.js';

	import config from '@/js/config.js';
	export default {
		name: "x-form",
		props: {
			myForm: {
				type: Array,
				default () {
					return []
				}
			},
			form: {
				type: Object,
				default () {
					return {}
				}
			},
			rules: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				action: `${config.reqUrl}/api/common/upload`,
				fileList: [],
				uploadFile: {},
				calendarObj: {},
				config: config
			};
		},
		methods: {
			// 选择文件
			chooseFile(e, name, mode) {
				saveOrPreviewFile.chooseFile(1).then(res => {
					this.form[name].file_name = res[0].name;
					myUploadFile(res[0].path).then(res1 => {
						this.form[name].file = res1.url;

						// emits('change', props.item.key, {
						// 	file: props.item.value,
						// 	file_name: props.item.fileName
						// });
					});
				});
			},

			// 文件上传成功时触发
			fileSuccess(event, origin) {
				if (!this.uploadFile[origin]) {
					this.uploadFile[origin] = []
				}
				this.uploadFile[origin].push(event.data.url)
				this.form[origin] = this.uploadFile[origin].join(',')
			},

			// 文件移除
			fileRemove(event, origin) {
				this.uploadFile[origin].splice(event, 1)
				this.form[origin] = this.uploadFile[origin].join(',')
			},

			// 验证规则方法
			async validate() {
				return await this.$refs.form1.validate();
			},
			// 日期选择时触发
			changeDate(e, origin, mode = "range") {
				if (mode == "range") {
					this.form[origin] = e.startDate + '至' + e.endDate
				} else {
					this.form[origin] = e.result
				}
			},
			// 城市选择时触发
			cityChange(e, origin) {
				console.log(e, origin);
				this.form[origin] = `${e.province.name}-${e.city.name}-${e.area.name}`
			}
		},
		mounted() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scope>
	.form-row {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 24rpx;
		margin-bottom: 20rpx;
	}



	.fileArea {
		width: 100%;

		.fileRow {
			height: 104rpx;
			width: 100%;
			background: #486AEF;
			border-radius: 16rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 33rpx;

			.label {
				font-weight: bold;
			}
		}

		.desArea {
			width: 100%;
			background: #F6F6F6;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 32rpx 24rpx;
			position: relative;

			.limitRemark {
				position: absolute;
				right: 20rpx;
				bottom: -10rpx;
			}

			.left {
				width: 112rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 33rpx;
			}

			.right {
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				color: #636363;
				line-height: 40rpx;
			}
		}


	}

	.des {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 28rpx;
		margin: 10rpx;
	}
</style>